<!-- 商品标准件结构 -->
<template>
	<div class="app-container">
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					size="mini"
					type="primary" 
					icon="el-icon-search"
					@click="handleQuery"
					v-hasPermi="['system:role:list']">查询</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					size="mini"
					type="primary"
					plain
					icon="el-icon-plus"
					@click="handleAdd"
					v-hasPermi="['system:role:add']">新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					size="mini"
					type="danger"
					plain
					icon="el-icon-delete"
					v-hasPermi="['system:user:admin']"
					@click="handleDelete">删除</el-button>
			</el-col>
		</el-row>
		
		<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="名称" prop="name" width="200"  align="center" />
			<el-table-column label="编号" prop="no" width="100"  align="center" />
			<el-table-column label="操作" width="250" align="center">
				<template slot-scope="scope">
					<el-button
					  size="mini"
					  type="text"
					  icon="el-icon-edit"
					  @click="handleUpdate(scope.row)"
					>修改</el-button>
					<el-button type="text" size="mini" icon="el-icon-delete" v-hasPermi="['system:user:admin']" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
		  <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
		    <el-row>
				<el-col :span="12">
					<el-form-item label="名称" prop="name">
						<el-input v-model="form.name" placeholder="请输入厂别名称" />
					</el-form-item>
					<el-form-item label="编号" prop="no">
						<el-input v-model="form.no" placeholder="请输入厂别编号" />
					</el-form-item>
				</el-col>
		    </el-row>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
		    <el-button @click="cancel">取 消</el-button>
		  </div>
		</el-dialog>
		
	</div>
</template>

<script>
	import { queryByPage, insert, update, delByIds } from "@/api/picking/plant"
	import { getToken } from "@/utils/auth"
	export default {
		data() {
			return {
				title: "新增厂别信息",
				open: false,
				form: {
					name: "",
					no: ""
				},
				rules: {
					name: [
						{ required: true, message: "请输入厂别名称", trigger: "blur" },
					],
					no: [
						{ required: true, message: "请输入厂别编号", trigger: "blur" },
					],
				},
				list: [],
				loading: true,
				ids: [],
			}
		},
		mounted() {
			let that = this
			that.handleGetList()
		},
		methods: {
			// 查询
			handleQuery() {
				let that = this
				that.pageNum = 1
				that.loading = true
				that.handleGetList()
			},
			// 删除
			handleDelete(row) {
				let that = this
				const ids = row.id || that.ids;
				that.$modal.confirm("是否确认删除你选择的厂别吗？").then(function() {
					delByIds(ids).then(res => {
						that.handleGetList()
						that.$modal.msgSuccess("删除成功");
					}).catch(function() {
					});
				}).catch(() => {
					console.log("删除失败")
				})
			},
			handleGetList() {
				let that = this
				queryByPage().then(res => {
					that.list = res.rows
					that.total = res.total
					that.loading = false
				}).catch(function() {
				})
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				let that = this
				that.ids = selection.map(item => item.id)
			},
			// 打开新增
			handleAdd() {
				let that = this
				let form = {
					name: "",
					no: ""
				}
				that.form = form
				that.title = "新增厂别信息"
				that.open = true
			},
			handleUpdate(res) {
				let that = this
				let form = {
					id: res.id,
					name: res.name,
					no: res.no
				}
				that.form = form
				that.title = "修改厂别信息"
				that.open = true
			},
			submitForm(formName) {
				let that = this
				that.$refs[formName].validate((valid) => {
					if (valid) {
						if(that.form.id != null) {
							update(that.form).then(res => {
								that.handleGetList()
								that.$modal.msgSuccess("修改成功");
								that.open = false
							}).catch(function() {
							})
						} else {
							insert(that.form).then(res => {
								that.handleGetList()
								that.$modal.msgSuccess("新增成功");
								that.open = false
							}).catch(function() {
							})
						}
					} else {
						return false;
					}
				})
			},
			cancel() {
				let that = this
				that.open = false
			},
		}
	}
</script>

<style>
</style>